<template>
    <view class="page">
        <!--商品列表-->
        <view class="recommend-list">
            <view class="null" v-if="indexAreaList.length==0">
                没有更多了~
            </view>
            <view class="recommend-item" v-for="(item,index) in indexAreaList" :key="index"  @click="toChooseAreaShop(item.id)">
                <view class="item-img">
                    <image :src="item.img_url?item.img_url:errImgUrl" mode="widthFix"/>
                </view>
                <view class="item-right">
                    <view class="item-des">{{item.name}}</view>
                    <!-- <view class="item-info">{{item.info==''?item.name:item.info}}</view> -->
<!--                    <view class="price">-->
<!--                        <view><span>￥{{item.selling_price}}</span></view>-->
<!--                        <image @click.stop="showCartModal(item.id)" class="img" src="../../static/search/cart.png" />-->
<!--                        <view class="img-icon" v-if="item.shop_cart_num>0">{{item.shop_cart_num}}</view>-->
<!--                    </view>-->
                </view>
            </view>
            <view class="null">
                <u-loadmore bg-color="#f9f9f9;" color='#B5B5B5' :status="loadingStatus" :icon-type="iconType" :load-text="loadText" />
            </view>
        </view>
        <!--商品列表end-->

        <cart-dialog :showModal="showModal" :goodsId="id" @hideCartModal="hideCartModal"></cart-dialog>

    </view>
</template>

<script>
import cartDialog from '@/components/cart-dialog/cart-dialog.vue'
export default {
    components: {
        cartDialog
    },
    data() {
        return {
            current: 0,
            barWidth: 0,
            merchantMedicineList: [],
            page: 1,
            total: 0,
            goodsDetail: '',
            id: '',
            num: 1,
            showModal: false,
            classify_id: '',
            errImgUrl: this.$errorImgUrl,//找不到图片的URL
            buttonList: [],
            loadingStatus: 'loading',
            iconType: 'flower',
            loadText: {
                loadmore: '轻轻上拉',
                loading: '努力加载中',
                nomore: '没有更多了'
            },
            area_id: '',
            name: '',
            merchant: '',
            indexAreaList:[]
        }
    },
    /* computed: {
      merchant(){
        return this.$store.state.modulesMerchant.merchant
      },
    }, */
    onReachBottom() {
        if(this.loadingStatus=="loading"||this.total==this.merchantMedicineList.length){
            return
        }
        this.page = this.page+1;
        this.getMerchantMedicineList();
    },
    methods: {
        toChooseAreaShop(area_id){
            wx.setStorageSync('area_id',area_id);
            wx.switchTab({
                url: `/pages/shopList/shopList`
            })
        },
        //获取首页专区
        async getIndexAreaList() {
            let res = await this.$api.getIndexAreaList( {
                merchant_id: 1,
            },this.$baseUrl)
            this.areaMerchantList = []
            if(res.data.level=='success'){
                let _this = this;
                this.indexAreaList = res.data.data;

                //loading状态
                this.loadingStatus = 'nomore'
                // if(this.indexAreaList&&this.indexAreaList.length>0){
                //   this.indexAreaList.forEach((item,index) => {
                // 	_this.getMerchantMedicineList(item.id,this.merchant.merchant_id,index)
                //   })
                // }
            }
        },
        change(index) {
            this.current = index
            this.classify_id = this.buttonList[index].classify_id
            this.getMerchantMedicineList()
        },
        //获取商品列表
        async getMerchantMedicineList(){
            this.loadingStatus = 'loading';
            let res=await this.$api.getMerchantMedicineList({
                merchant_id: this.merchant.merchant_id,
                page: this.page,
                area_id: this.area_id,
                limit: 8
            },this.$baseUrl);
            if(res.data.level=='success'){
                if(this.page == 1){
                    this.merchantMedicineList = res.data.data.medicine_info;
                } else{
                    if(res.data.data.length == 0){
                        this.page--;
                    } else{
                        this.merchantMedicineList = this.merchantMedicineList.concat(res.data.data.medicine_info)
                    }
                }
                this.total = res.data.page_info.total;
                //loading状态
                if(this.merchantMedicineList.length==this.total){
                    this.loadingStatus = 'nomore'
                } else{
                    this.loadingStatus = 'loadmore'
                }
            } else{
                uni.showToast({
                    title: res.data.message,
                    icon: 'none',
                    duration: 1500
                })
            }
        },

        //显示购物车
        showCartModal(id){
            this.id = id;
            this.showModal = true;
        },
        //隐藏购物车
        hideCartModal(){
            this.id = ''
            this.showModal = false;
        },

        //跳转商品详情
        toGoodsDetail(id){
            wx.navigateTo({url:'/pages/goodsDetail/goodsDetail?id='+id})
        },
    },
    onShow() {
        this.merchant = wx.getStorageSync('merchant')
        this.getIndexAreaList();
    },
    onLoad(options) {
        this.area_id = options.areaId
        this.name = options.name
    }
}
</script>

<style lang="scss" scoped>
    @import "../../common/css/mixin";
    .page{
        min-height: 100vh;
        background-color: #F9F9F9;
    }
    .nav-wrap{
        position: fixed;
        left: 0;
        right: 0;
        width: 100vw;
        z-index: 99;
    }
    .introduce-background{
        width: 100vw;
        height: 96px;
        background-image: url(../../static/goodsDetail/background.png);
        background-size: 100% auto;
        display: flex;
        align-items: center;
        justify-content: center;
        .content{
            width: calc(100vw - 40px);
            color: #FFFFFF;
            h1{
                font-size: 14px;
                font-weight: bold;
            }
            .desc{
                font-size: 11px;
                margin-top: 10px;
            }
        }
    }
    .recommend-list{
        @include flexWrap(flex-start,flex-start);
        flex-direction: row;
        justify-content: space-between;
        width: calc(100vw - 40rpx);
        background-color: #F9F9F9;
        padding: 20rpx;
        .null{
            width: 100%;
            padding: 60rpx 0;
            text-align: center;
            font-size: 34rpx;
            color: #959595;
            height: 100rpx;
            line-height: 100rpx;
        }
        .recommend-item{
            width: calc((100% - 100rpx)/2);
            padding: 20rpx;
            margin-bottom: 10px;
            border-radius: 5px;
            overflow: hidden;
            background: #ffffff;
            @include flex();
            flex-direction: column;
            .item-img{
                width: calc((100vw - 120rpx)/2);
                height: calc((100vw - 120rpx)/2);
                border-radius: 16rpx;
                overflow: hidden;
                display: flex;
                align-items: center;
                image {
                    width: calc((100vw - 120rpx)/2);
                }
            }
            .item-right{
                @include flex();
                flex-direction: column;
                height: 8vw;
                justify-content: space-between;
                width: 100%;
                line-height: 8vw;
                .item-des{
                    /* height: 6vw; */
                    line-height: 6vw;
                    width: 100%;
                    font-size: 32rpx;
                    @include ellipsis(2);
                    text-align: center;
                    margin-top: 2vw;
                }
                .item-info{
                    height: 6vw;
                    line-height: 6vw;
                    width: 100%;
                    font-size: 24rpx;
                    color: #aaaaaa;
                    @include ellipsis(2);

                }
                .price{
                    font-size: 34rpx;
                    @include flex(flex-start,flex-end);
                    flex-direction: row;
                    height: 8vw;
                    width: 100%;
                    color: #F55D0E;
                    font-weight: bold;
                    position: relative;
                    .original{
                        font-size: 22rpx;
                        color: #707070;
                        text-decoration: line-through;
                        padding-left: 20rpx;
                    }
                    .img{
                        margin-left: auto;
                        width: 29px;
                        height: 29px;
                    }
                    .img-icon{
                        position: absolute;
                        bottom: 20rpx;
                        right: 0;
                        width: 20rpx;
                        height: 20rpx;
                        background: #e12317;
                        border-radius: 360rpx;
                        color: #ffffff;
                        font-size: 18rpx;
                        text-align: center;
                        line-height: 20rpx;
                    }
                }
                .sale_count{
                    position: relative;
                    font-size: 24rpx;
                    color: #b2b2b2;
                    width: 100%;
                    height: 40rpx;
                    line-height: 40rpx;
                    @include flex(flex-start);
                    .img{
                        margin-left: auto;
                        width: 40rpx;
                        height: 40rpx;
                    }
                    .img-icon{
                        position: absolute;
                        bottom: 20rpx;
                        right: 0;
                        width: 20rpx;
                        height: 20rpx;
                        background: #e12317;
                        border-radius: 360rpx;
                        color: #ffffff;
                        font-size: 18rpx;
                        text-align: center;
                        line-height: 20rpx;
                    }
                }
            }

        }
    }

    /* 弹出框 */
    .mask{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: #000;
        z-index: 9000;
        opacity: 0.7;
    }
    .modalDlg{
        width: 100%;
        height:45%;
        position: fixed;
        bottom:0;
        left: 0;
        z-index: 9999;
        background-color: #ffffff;
        color: #000000;
        padding-bottom: 40px;
    }

    .modalDlg_top{
        padding:5px 25px 5px 10px;
        /*padding-right:25px;*/
        display: flex;
        align-items: center;
        /*border-bottom: 1px solid #eee;*/
        height: 30%;

    }
    .modalDlg_top>img{
        width:80px;
        height: 80px;
    }
    .modalDlg_top_right{
        margin-left:20px;
        width:calc(100% - 100px);
    }
    .modalDlg_top_right_name{
        display: flex;
        align-items: center;
        color
        span{
            @include ellipsis(3)
        }
    }
    .modalDlg_top_right_name_tag{
        color:purple;
        display: inline-block;
        width:50px;
        text-align: center;
        border:1px solid purple;
        font-size: 10px;
        border-radius: 5px;
        margin-right:5px;
    }
    .modalDlg_top_right_name_tag+span{
        width:200px;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .modalDlo_bottom{
        margin-left:10px;
    }
    .cart_price{
        margin-top:15px;
        display: flex;
        justify-content: space-between;
        align-items: center
    }
    .cart_price>span:nth-child(1){
        color:red;
    }
    .modalDlo_center{
        max-height: 50%;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
        width:100%;
        /*max-height: 45%;*/
    }
    .modalDlo_center_classify{
        display:flex;
        align-items: center;
        flex-wrap:wrap;
        margin:10px;
        /*padding-bottom: 50px;*/
    }
    .modalDlo_center_classify>div{
        border:1px solid #eee;
        padding:2.5px 5px;
        border-radius: 5px;
        margin-right:5px;
        text-align: center;
    }
    .modalDlo_center_tit{
        padding-left:10px;
    }
    .join_cart{
        width:100%;
        background: rgb(196, 75, 75);
        color:#fff;
        font-size: 20px;
        text-align: center;
        line-height: 40px;
        position: absolute;
        bottom:0;
    }
    button::after {
        border: none;
    }
    button {
        background-color: #fff;
        line-height: 16px;
        font-size: 10px;
        border-radius:0;
    }
    /* 规格 */
    .selectClassify{
        border:red 1px solid !important;
        color:red;
    }

    .back{
        background: #ffffff;
    }

    .bottom{
        padding: 30rpx;
        text-align: center;
        color: #999999;
        background: #ffffff;
    }
</style>
